@theme: default;
@ant-prefix: ym;
@white: #fff;
@black: #000;
@text-color: fade(@black, 85%);
@heading-color: fade(@black, 85%);
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
@text-color-secondary: fade(@black, 45%);
@line-height-base: 1.6667;
@font-size-sm: 12px;
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
@icon-color: inherit;


// Border color
@border-radius-base: 2px;
@border-radius-sm: 2px;
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 94%); // split border inside a component
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border

// control border
@control-border-radius: @border-radius-base;

// Outline
@outline-blur-size: 0;
@outline-width: 2px;
@outline-color: @primary-color; // No use anymore
@outline-fade: 20%;

// vertical paddings
@padding-lg: 24px; // containers
@padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items
@padding-xss: 4px; // more small

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;

// vertical margins
@margin-lg: 24px; // containers
@margin-md: 16px; // small containers and buttons
@margin-sm: 12px; // Form controls and items
@margin-xs: 8px; // small items
@margin-xss: 4px; // more small

// height rules
@height-base: 32px;
@height-lg: 40px;
@height-sm: 24px;

//background
@background-color-light: fade(@white, 4%); // background of header and selected item
@background-color-base: fade(@white, 8%); // Default grey background color

// Disabled states
@disabled-color: fade(#000, 25%);
@disabled-bg: @background-color-base;
@disabled-active-bg: tint(@black, 90%);
@disabled-color-dark: fade(#fff, 35%);


// Input
// ---
@input-height-base: @height-base;
@input-height-lg: @height-lg;
@input-height-sm: @height-sm;
@input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg: @input-padding-horizontal;
@input-padding-vertical-base: max(
  (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
    @border-width-base,
  3px
);
@input-padding-vertical-sm: max(
  (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
    @border-width-base,
  0
);
@input-padding-vertical-lg: (
    ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
  ) - @border-width-base;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-icon-color: @input-color;
@input-border-color: @border-color-base;
@input-bg: @component-background;
@input-number-hover-border-color: @input-hover-border-color;
@input-number-handler-active-bg: #f4f4f4;
@input-number-handler-hover-bg: @primary-5;
@input-number-handler-bg: @component-background;
@input-number-handler-border-color: @border-color-base;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @primary-5;
@input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%);
@input-disabled-color: @disabled-color;


//Form
@form-item-label-height: @input-height-base;
@form-item-label-font-size: @font-size-base;
@form-item-label-colon-margin-right: 8px;
@form-item-label-colon-margin-left: 2px;
@form-item-margin-bottom: 16px;
@form-vertical-label-margin: 0;
@form-vertical-label-padding: 0 0 8px;
@label-color: @heading-color;
@label-required-color: @error-color;
@form-item-trailing-colon: true;

// Color
//---Primary
@primary-color: #f66e2c;
@primary-1:#fff6f0;
@primary-2:#ffebde;
@primary-3:#ffcfb5;
@primary-4:#ffb18c;
@primary-5:#ff9063;
@primary-6:#f66e2c;
@primary-7:#d94e27;
@primary-8:#b33417;
@primary-9:#8c1f0b;
@primary-10:#661207;

@primary-color-hover: @primary-5;
@primary-color-active: @primary-7;
@primary-color-outline: fade(@primary-color, @outline-fade);

@success-color: #52c41a;
@success-color-hover: #73d13d;
@success-color-active: #389e0d;
@success-color-outline: rgba(82, 196, 26, .2);
@success-color-deprecated-bg: #f6ffed;
@success-color-deprecated-border: #b7eb8f;
@error-color: #ff4d4f;
@error-color-hover: #ff7875;
@error-color-active: #d9363e;
@error-color-outline: rgba(255, 77, 79, .2);
@error-color-deprecated-bg: #fff2f0;
@error-color-deprecated-border: #ffccc7;
@warning-color: #faad14;
@warning-color-hover: #ffc53d;
@warning-color-active: #d48806;
@warning-color-outline: rgba(250, 173, 20, .2);
@warning-color-deprecated-bg: #fffbe6;
@warning-color-deprecated-border: #ffe58f;


// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// ICONFONT
@iconfont-css-prefix: anticon;

// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
